<template>
  <div>
    <button @click="getRef">获取Header组件上的ref</button>
    <!-- <Header ref="HeaderComp" /> -->
    <!-- 批量传递props -->
    <Header v-bind="person" />
    <h2>这个count每次加2</h2>
    <Count :num="2" />
    <hr />
    <h2>这个count每次加3</h2>
    <Count :num="3" />
    <hr />
    <Count />
  </div>
</template>

<script>
import Header from "./components/Header";
import Count from "./components/Count";
export default {
  name: "App",
  data() {
    return {
      person: {
        name: "laowang",
        age: 18,
        sex: "nan",
      },
    };
  },
  components: {
    Header,
    Count,
  },
  methods: {
    getRef() {
      console.log(this.$refs);
      console.log(this.$refs.HeaderComp);
    },
  },
};
</script>

<style scoped>
</style>